import { View, Image , Swiper, SwiperItem } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
// import useCallFun from "../../hooks/useCallFun";
import "./popular_s.scss";

const Populars = props => {
  const [mockData, setData] = useState([]);

  // const { data } = useCallFun("logins", {
  //   defaultParams: { $url: "getScience" }
  // });
  useEffect(() => {
    Taro.cloud
      .callFunction({
        name: "logins",
        data: {
          $url: "getScience"
        }
      })
      .then((res: any) => {
        // console.log(res);
        setData(res.result.data);
      });
  }, [props]);

  const handleClick = (item:any) => {
    Taro.setStorageSync('pageDetail',item)
    Taro.navigateTo({
      url:
        "/pages/popular_science/Popular_science_article/Popular_science_article"
    });
  };

  return (
    <View>
      <Swiper
        className='test-h'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        vertical
        circular
      >
        {mockData.length > 0 &&
          mockData.map((item: { title: string; image: string }) => {
            return (
              <SwiperItem>
                <View style={{ height: "100vh" }}>
                  <Image className='title-pic' src={item.image} />
                  <View className='content'>
                    <View className='title'>{item.title}</View>
                    {/* <View>{item.content}</View> */}
                    <View
                      style={{
                        width: "100%",
                        display: "flex",
                        justifyContent: "center"
                      }}
                    >
                      <View className='btn' onClick={() => handleClick(item)}>
                        进入文章
                      </View>
                    </View>
                  </View>
                </View>
              </SwiperItem>
            );
          })}
      </Swiper>
    </View>
  );
};

export default Populars;
